/*
 *
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
var map;
var tabpoint=new Array();
var dirService =  [];
var dirRenderer = [];
var dirOptions = [];
var optDef = {
    opt_anchor: [0, 0],
    opt_textColor: '#FF0000',
    opt_textSize: 12
};
var indice;
var elevator = new google.maps.ElevationService();
var chart;
//var polyline;

// Load the Visualization API and the columnchart package.
google.load("visualization", "1", {
    packages: ["columnchart"]
});

$(document).ready(function () {

    $("#statParcours").hide();
    $("#articleGraph").hide();
    $("#modifier").hide();
    $("#marker").hide();
    $("#output").hide();
    $("#list_arc").hide();
    $("#list_activite").hide();
   
    var latlng = new google.maps.LatLng(latitude, longitude);

    $('#map_canvas').gmap3({
        action: 'init',
        options:{
            center: latlng,
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            navigationControl: true,
            scrollwheel: true,
            streetViewControl: true
        },
        events:{
            
            click:function(map,event){
               
                $('#map_canvas').gmap3('get'),
                dir = $('#map_canvas').gmap3({
                    action:'get',
                    name:'directionRenderer'
                });
                                
                if (dir){
                    
                }else
                {
                    $('#map_canvas').gmap3('get'),
                    overlay = $('#map_canvas').gmap3({
                        action:'get',
                        name:'overlay'
                    });
                    if (overlay){
                        $('#map_canvas').gmap3({
                            action:'clear',
                            name:'overlay'
                        });
                    } else {

                        var latlong = event.latLng;
                        var lat = latlong.lat();
                        var lng = latlong.lng();

                        $("#lat").val(lat);
                        $("#long").val(lng);

                        var fenetre='#marker';
                        $masquer(fenetre);
                    }

                }
            }
        }
    }
    );

       
    map= $("#map_canvas").gmap3('get');

    $listePoint();
    $importerPolyline(id);
   
    //Fonction lors de la soumission du formulaire
    $("#addMarker").submit(function() {
    
        $ajoutPoint();      
        alert('Création du marqueur ' + $("#point").val() + ' avec succès');
               
        $('#mask').hide();
        $('.window').hide();
               
        $vider_champ();                
            
        return false;
    });
   
   
    /*
         *
         * Fenetre de choix des parametres du parcours
         */
    $('#creerParcours').click(function() {
         
        //On supprime la liste existante s'il y en a'
        $('.itemPointDep').remove();
         
        //On recupere les points de départs et on les ajoute a la combobox
        $('tr[title=1]').each( function(){
            $('#pointDepart').append('<option class="itemPointDep" value="'+$(this).attr('id')+'">'+$(this).find('td').eq(0).html()+'</option>');
        });
   
        var fenetre='#creationParcours';
        $masquer(fenetre);
       
    });
   
    //Creation du slider
    $( "#slider-range" ).slider({
        range: true,
        min: 0,
        max: 300,
        values: [ 60, 120 ],
        slide: function( event, ui ) {
            $( "#temps" ).val(Math.floor(ui.values[ 0 ]/60) + " h "+ Math.floor(ui.values[0]%(60)) +" min - " + Math.floor(ui.values[1]/60) + " h "+ Math.floor(ui.values[1]%(60))+" min");
        }
    });
   
    //Gestion de la valeur du slider
    $( "#temps" ).val(Math.floor($( "#slider-range" ).slider( "values", 0 )/60) + " h " + Math.floor($( "#slider-range" ).slider( "values", 0 )%(60)) +
        " min - " + Math.floor($( "#slider-range" ).slider( "values", 1 )/60) + " h " + Math.floor($( "#slider-range" ).slider( "values",1)%(60))+" min");


    //Fonction lors de la soumission du formulaire
    $("#addParcours").submit(function() {
        //Verification qu'il existe un point de depart'
        if($("#pointDepart").val() == null){
            alert("Veuillez selectionner un point de départ");
        }
        else{
            //Recuperation des variables
            var depart=$("#pointDepart").val();
            //            var tempsMin=$("#slider-range").slider("values",0);
            //            var tempsMax=$("#slider-range").slider("values",1);
            var difficulte=new Array();
            difficulte["enfant1"]=$("#enfant1").attr('checked');
            difficulte["enfant2"]=$("#enfant2").attr('checked');
            difficulte["enfant3"]=$("#enfant3").attr('checked');
            difficulte["mobiliteR"]=$("#mobiliteR").attr('checked');
           
            //Génération de parcours
            $tracerParcours(depart,0,0,difficulte);
            $("#statParcours").show();
            $("#articleGraph").show();
           
            $demasquer();
   
        }
        return false;
    });
   
    //Fonction appelé lors du clic sur vider les champs
    $("#clear").click(function(){
        $vider_champ();
    });
   
    //Fonction appelé lors du clic sur vider les champs
    $("#annuler").live('click',function(){
        $(".modificationPoint").remove();
        $demasquer();
    });


    //UPLOAD
    // On ajoute la propriété spéciale dataTransfer à nos events jQuery
    // On ajoute la propriété spéciale dataTransfer à nos events jQuery
    $.event.props.push("dataTransfer");

    // On pose les évènements nécessaires au drag'n'drop
    $('#output').bind({
        "dragenter dragexit dragover" : do_nothing,
        "drop" : drop
    });

    $("#buttonUpload").toggle(
        function(){
            $("#output").slideDown();
        },
        function(){
            $("#output").slideUp();

        });
      
    $("#genererGraph").click(function(){
        $tracerGraphe();
        $("#statParcours").hide();
        $("#articleGraph").hide();
    });
        
    $("#exporterGraph").click(function(){
        });
    
    $("#supprimerGraph").live("click",function(){
        //Fenêtre de confirmation de suppression du site
        if(!confirm('Attention, tous les arcs vont être supprimés, êtes-vous sur de vouler supprimer le graphe?')){
            return false;
        }
        $effacerGraphe();
        $supprimerGraphe();
    });
    
    $("#checkPoint").change(function(){
        if($(this).attr('checked')==true){
            $('#list_point').show();
        }else{
            $('#list_point').fadeOut('slow');
        }
    });
    
    $("#checkActivite").change(function(){
        if($(this).attr('checked')==true){
            $('#list_activite').show();
        }else{
            $('#list_activite').fadeOut('slow');
        }
    });
    
    $("#checkArc").change(function(){
        if($(this).attr('checked')==true){
            $('#list_arc').show();
        }else{
            $('#list_arc').fadeOut('slow');
        }
    });
   
});


function $supprimerGraphe(){
     
    $.ajax({
        type: 'POST',
        url: 'gestionArc.php',
        data: "action=supprimerGraphe&idGraphe="+id,
        success: function(data, textStatus, jqXHR) {
        //                alert(data)
        },
        error: function(jqXHR, textStatus, errorThrown) {
            //alert(textStatus)
        }
    });  
}

function $importerPolyline($idGraphe){
    
    $.ajax({
        type: 'POST',
        url: 'gestionArc.php',
        data:"action=listeArc&idGraphe="+$idGraphe,
        dataType:'json',
        success: function(data, textStatus, jqXHR) {                            
            $.each(data, function(key, val) {
                
                var os= eval('('+val.waypoints+ ')');
                var wp = [];
                for(var i=0;i<os.waypoints.length;i++)
                    wp[i] = {
                        'location': new google.maps.LatLng(os.waypoints[i][0], os.waypoints[i][1]),
                        'stopover':false
                    }
                              
                indice = dirService.length;
                dirOptions[indice] = new Object();
                dirOptions[indice].routes = [];
           
                dirService[indice] =  new google.maps.DirectionsService();
                dirRenderer[indice] = new google.maps.DirectionsRenderer({
                    'map': map,
                    'preserveViewport': false,
                    'draggable': true
                });
                
                dirService[indice].route({
                    'origin':new google.maps.LatLng(os.start.lat,os.start.lng),
                    'destination':new google.maps.LatLng(os.end.lat,os.end.lng),
                    'waypoints': wp,
                    'travelMode': google.maps.DirectionsTravelMode.WALKING
                },function(res,sts) {
                    if(sts=='OK'){
                        showDirections(res, sts,false,res,val.depart,val.arrivee,val.id);
                    }else{
                        //alert(res)
                    }
                }) 
                            
            })
        },
        error: function(jqXHR, textStatus, errorThrown) {
        //alert(textStatus)
        }
    })    
}

//Fonction appelé pour enlever le masque de l'ecran'
function $masquer(fenetre){
    //Get the screen height and width
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();
       
    //Set heigth and width to mask to fill up the whole screen
    $('#mask').css({
        'width':maskWidth,
        'height':maskHeight
    });
               
    //Effet de transition
    $('#mask').fadeIn(1000);
    $('#mask').fadeTo("slow",0.8);
       
    //Recuperation des dimensions de l'ecran'
    var winH = $(window).height();
    var winW = $(window).width();
   
    $(fenetre).css('top',  winH/2-$(fenetre).height()/2);
    $(fenetre).css('left', winW/2-$(fenetre).width()/2);
    $(fenetre).fadeIn(2000);
}

//Fonction appelé pour enlever le masque de l'ecran'
function $demasquer(){
    $('#mask').hide();
    $('.window').hide();
}

/*
     * Fonction qui permet de réinitialiser les champ du formulaire
     */
function $vider_champ(){
   
    //on vide les champs du formulaire après l'ajout du marker
    $("#lat").val("");
    $("#long").val("");
    $("#point").val("");
    $("#descr").val("");
    $("#depart").attr('checked','')

    return false;
}

/*
     * Fonction qui crée un marker pour chaque point
     */
function $creerMarker($idPoint,lat,lon,dep, $infos){

    var icon;

    if(dep==0){
        icon=null;
    }else{
        icon='./img/beachflag.png';
    }

    //Création du marker correspondant
    $("#map_canvas").gmap3({
        action: 'addMarker',
        lat: lat,
        lng: lon,
        marker:{
            callback: function(marker) {
               
                //Lors d'un clic sur le lien correspondant au marker'
                $("#lien"+$idPoint).live('click', function(){
                    //Centrage de la carte sur le marker
                    $("#map_canvas").gmap3({
                        action:'panTo',
                        args:[marker.position]
                    });
                    
                    $("#list_activite").show();
                    $(".infoActivite").remove();
                    
                    $("#list_activite").show();


                    //on recuperer les activites du point clic
                    $.ajax({
                        type: 'POST',
                        url: 'gestionActivite.php',
                        data:"action=afficherActivite&idPoint="+$idPoint,
                        dataType:'json',
                        success: function(data, textStatus, jqXHR) {
                            
                            $.each(data, function(key, val) {
                                
                                //Ajout des points à la liste
                                $('#listA').append("<tr class='infoActivite' title='"+val.idActivite+"' id='"+val.idActivite+"'>"+
                                    "<td>"+val.nomPoint+"</td>"+"<td>"+val.type+"</td>"+
                                    "<td><a href='#' id='ModifA"+val.idPoint+"' onClick=modifierActivite("+val.idActivite+",'"+val.type+"');><img src='images/icn_edit.png' alt='modifier'/></a>"+
                                    "<a href='#' id='SupprA" +val.idPoint+ "' onClick='supprimerActivite("+val.idActivite+")'><img src='images/icn_trash.png' alt='supprimer'/></a></td></tr>");
                            });

                            
                            $("#checkActivite").attr('checked','checked');
                            
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                        }
                    });
                    return false;
                }); 

               
                //Creation d'une fonction pour le lien 'supprimer' correspondant au marker'
                $("#Suppr"+$idPoint).click(function(){
                    marker.setMap(null);
                    $supprimerPoint($idPoint);
                });
               
                //Creation d'une fonction pour le lien 'modifier' correspondant au marker'
                $("#Modif"+$idPoint).live('click',function(){

                    //Modification de l'image du marker'
                    marker.setIcon("./img/blue_marker.png");
                 
                    //Affichage des informations du point
                    $recupPoint($idPoint);
                   
                    $("#map_canvas").gmap3({
                        action:'panTo',
                        args:[marker.position]
                    });
                   
                    var latlong =  marker.getPosition();
                    $("#lat").val(latlong.lat());
                    $("#long").val(latlong.lng());
                                       
                    var fenetre='#marker';
                    $masquer(fenetre);
           
                    //Modification du bouton
                    $("#ajout").hide();
                    $("#annuler").hide();
                    
                    $("#validationPoint").append('<input type="button" class="close annulerModif" id="annuler'+$idPoint+'" value="Annuler"/>');
                    $("#validationPoint").append('<input type="submit" class="modificationPoint alt_btn" id="modification'+$idPoint+'" value="Modifier le point"/>');
                
                    //Fonction appelé lors du clic sur vider les champs
                    $("#annuler"+$idPoint).live('click',function(){
                        $(".annulerModif").remove();
                        $(".modificationPoint").remove();
                        
                        var estDepart=$("#depart").attr('checked');

                        if(estDepart==false){
                            icon=null;
                        }else{
                            icon='./img/beachflag.png';
                        }                
                        marker.setIcon(icon);      
                        $demasquer();
                        $("#annuler").show();
                    });
                    
                });

                //Fonction lors d'un click sur modifier'
                $("#modification"+$idPoint).live('click',function(){
                    if($("#point").val() == ""){
                        alert("Veuillez indiquer le nom du point svp !!");
                    }
                    else{
                        if($("#descr").val() == ""){
                            alert("Veuillez remplir le champ de description");
                        }
                        else{
                            var estDepart=$modifierPoint($idPoint);
                                                   
                            if(estDepart==0){
                                icon=null;
                            }else{
                                icon='./img/beachflag.png';
                            }
                           
                            marker.setIcon(icon);
                            $vider_champ();
                           
                            $(".annulerModif").remove();
                            $("#modification"+$idPoint).remove();
                            $("#ajout").show();
                           
                            $demasquer();
                        }
                    }
                    return false;
                });
            },
            options:{
                draggable: true,
                icon: icon
            },
            events:{
                click: function(marker,event){
                    var infowindow = $("#map_canvas").gmap3({
                        action:'get',
                        name:'infowindow'
                    });
                    if (infowindow){
                        infowindow.setContent($infos +'<br /><a  href="#" id="addActivite">Ajouter une activité</a>');
                        infowindow.open(map, marker);
                    } else {
                        $("#map_canvas").gmap3({
                            action:'addinfowindow',
                            anchor:marker,
                            options:{
                                content: $infos+'<br /><a  href="#" id="addActivite">Ajouter une activité</a>'
                            }
                        });
                    }
                    $("#addActivite").live('click',function(){
                        $choixActivite($idPoint);

                    });
                },
                dragend: function(marker){
                 
                    //Modification de l'image du marker'
                    marker.setIcon("./img/blue_marker.png");
                 
                    //Affichage des informations du point
                    $recupPoint($idPoint);
                   
                    $("#map_canvas").gmap3({
                        action:'panTo',
                        args:[marker.position]
                    });
                                                    
                    var latlong =  marker.getPosition();
                    $("#lat").val(latlong.lat());
                    $("#long").val(latlong.lng());
                                       
                    var fenetre='#marker';
                    $masquer(fenetre);
           
                    //Modification du bouton
                    $("#ajout").hide();
                    $("#annuler").hide();
                    
                    $(".annulerModif").remove();
                    
                    $("#validationPoint").append('<input type="button" class="close annulerModif" id="annuler'+$idPoint+'" value="Annuler"/>');
                    $("#validationPoint").append('<input type="submit" class="modificationPoint alt_btn" id="modification'+$idPoint+'" value="Modifier le point"/>');
                
                    //Fonction appelé lors du clic sur vider les champs
                    $("#annuler"+$idPoint).live('click',function(){
                        $(".annulerModif").remove();
                        $(".modificationPoint").remove();
                        
                        var estDepart=$("#depart").attr('checked');

                        if(estDepart==false){
                            icon=null;
                        }else{
                            icon='./img/beachflag.png';
                        }                
                        marker.setIcon(icon); 
                        marker.setPosition(new google.maps.LatLng(parseFloat(tabpoint[$idPoint]["latitude"]),parseFloat(tabpoint[$idPoint]["longitude"])));
                        
                        $("#map_canvas").gmap3({
                            action:'panTo',
                            args:[marker.position]
                        });
                        
                        $demasquer();
                        
                        $("#annuler").show();
                    });
            
                }
            }
        }
    });
    return false;
}

/*
     * Fonction qui trace la route du point1 au point 2
     */
function $tracerGraphe(){
    
    $('#map_canvas').gmap3('get'),
    polylines = $('#map_canvas').gmap3({
        action:'get',
        name:'polyline'
    });
    
    if (polylines){
    
        //Fenêtre de confirmation de suppression du site
        if(!confirm('Attention, tous les arcs vont être supprimés, êtes-vous sur de vouler générer un nouveau graphe?')){
            return false;
        }
    }
    var i=1;
    var j=1;
        
    $effacerGraphe();
    $('.infoArc').remove();

    $('.infoPoint').each( function(){
       
        var lat=tabpoint[$(this).attr("id")]["latitude"];
        var lon=tabpoint[$(this).attr("id")]["longitude"];
        var nomPoint=tabpoint[$(this).attr("id")]["nomPoint"];
        
        j=1;

        $('.infoPoint').each( function(){         

            if(j>i){
           
                var optDirection = {
                    depart :[tabpoint[$(this).attr("id")]["latitude"],tabpoint[$(this).attr("id")]["longitude"]],
                    arrive:[lat,lon],
                    nomDepart:nomPoint,
                    nomArrivee:tabpoint[$(this).attr("id")]["nomPoint"],
                    type: "walk",
                    preverse: false,
                    draggable:false,
                    alternative:false
                }
                addDirection(optDirection,"false");
            }        
            j++;
        });
       
        i++;
    });
    return false;
}

/*
     *
     * Fonction de retour de addDirection
     */
function maFonctionRetourDirection(tab_etape){
   
    var option = {
        tab_etape : tab_etape
    }
// traceAutoDirection(option);
}

/*
     *
     * Fonction de création de parcours
     */
function $tracerParcours(depart,tempsMin,tempsMax,difficulte){
   
    $effacerGraphe();
   
    var intermediaire;
    var waypoints=new Array();
    var i=1;
   
    var latDep=tabpoint[depart]["latitude"];
    var longDep=tabpoint[depart]["longitude"];
     
    $('.infoPoint').each( function(){
       
        var lat=tabpoint[$(this).attr("id")]["latitude"];
        var lon=tabpoint[$(this).attr("id")]["longitude"];
       
        if(i<9 && (latDep!=lat || longDep!=lon)){
            intermediaire=new google.maps.LatLng(lat,lon);
            waypoints.push({
                location: intermediaire,
                stopover: false
            });
        }
        i++;
    });
   
    var optDirection = {
        depart :[latDep,longDep],
        arrive:[latDep,longDep],
        waypoints:waypoints,
        type: "walk",
        preverse: false,
        draggable:false,
        alternative:false
    }
   
    addDirection(optDirection,"true",waypoints);

}

/*
     *
     * Fonction qui permet d'efface les polylines de la carte
     */
function $effacerGraphe(){
   
    $('#map_canvas').gmap3({
        action: 'clear',
        name:'polyline'
    });
    
    $('#map_canvas').gmap3({
        action:'clear',
        name:'directionRenderer'
    });
    
    $(".infoArc").remove();
    
    return false;
}

function addDirection(obj,isWaypoint, waypoints){
   
    var dirRequest;
   
    if (obj.type == 'car') {
        type = google.maps.DirectionsTravelMode.DRIVING;
    } else if (obj.type == 'bike') {
        type = google.maps.DirectionsTravelMode.BICYCLING;
    } else if (obj.type == 'walk') {
        type = google.maps.DirectionsTravelMode.WALKING;
    }
       
    if(obj.depart != "" && obj.arrive != ""){
               
        if(typeof(obj.depart) != "string"){
            obj.depart = new google.maps.LatLng(obj.depart[0], obj.depart[1]);

        }
               
        if(typeof(obj.arrive) != "string"){
            obj.arrive = new google.maps.LatLng(obj.arrive[0], obj.arrive[1]);

        }
       
        if(isWaypoint=="false"){
           
            dirRequest = {
                origin: obj.depart,
                destination: obj.arrive,
                travelMode: type,
                unitSystem: google.maps.DirectionsUnitSystem.METRIC,
                provideRouteAlternatives: obj.alternative
            };
       
        }else{
           
            dirRequest = {
                origin: obj.depart,
                destination: obj.arrive,
                waypoints:waypoints,
                travelMode: type,
                unitSystem: google.maps.DirectionsUnitSystem.METRIC,
                provideRouteAlternatives: obj.alternative
            };
        }
               
        indice = dirService.length;
        dirOptions[indice] = new Object();
        dirOptions[indice].routes = [];
           
        dirService[indice] =  new google.maps.DirectionsService();
        dirRenderer[indice] = new google.maps.DirectionsRenderer({
            'map': map,
            'preserveViewport': obj.preverse,
            'draggable': obj.draggable
        });
                
        dirService[indice].route(dirRequest, function(dirResult, dirStatus){
            var data = {};
            var w=[];
            var rleg = dirResult.routes[0].legs[0];
            data.start = {
                'lat': rleg.start_location.lat(), 
                'lng':rleg.start_location.lng()
            }
            data.end = {
                'lat': rleg.end_location.lat(), 
                'lng':rleg.end_location.lng()
            }
            var wp = rleg.via_waypoints 
            for(var i=0;i<wp.length;i++)w[i] = [wp[i].lat(),wp[i].lng()] 
            data.waypoints = w;
     
            var str = JSON.stringify(data);
            
            $.ajax({
                type: 'POST',
                url: 'gestionArc.php',
                data: "action=ajouterArc&idGraphe="+id+"&waypoints="+str+"&depart="+obj.nomDepart+"&arrivee="+obj.nomArrivee,
                success: function(data, textStatus, jqXHR) {
                    idPoly=data;
                    var results=dirResult;           
                    if(isWaypoint=="true"){
                        computeTotalDistance(dirResult);
                        showDirections(dirResult, dirStatus,isWaypoint,results,obj.nomDepart,obj.nomArrivee,idPoly);
                    }else{
                        showDirections(dirResult, dirStatus,isWaypoint,results,obj.nomDepart,obj.nomArrivee,idPoly);
                    }       
                },
                error: function(jqXHR, textStatus, errorThrown) {
//                    alert(textStatus)
                }
            });  
        
        });
               
    //return indice;
    }
    return null;
}


function traceAutoDirection(tab_etape, graphique, results, depart, arrivee,idPoly){
              
    var itineraire = [];
   
    for(var i = 0; i < tab_etape.length ; i++){
       
        itineraire.push(tab_etape[i].startCoord);
       
        for(var y = 0; y < tab_etape[i].steps.length ; y++){
            for(var z = 0 ; z < tab_etape[i].steps[y].path.length; z++){
                itineraire.push(tab_etape[i].steps[y].path[z]);
            }
        }
        itineraire.push(tab_etape[i].endCoord);
    }
                       
    addPolyline(itineraire,results, depart, arrivee,idPoly);
   
    if(graphique=="true"){
        drawPath(itineraire);
    }

    return false;
}


function showDirections(dirResult, dirStatus, graphique, results, depart, arrivee,idPoly) {
   
    //    if (dirStatus != google.maps.DirectionsStatus.OK) {
    //        alert('Directions failed: ' + dirStatus);
    //        return;
    //    }
    for(var i = 0 ; i < dirResult.routes.length; i++){
        parseRoute(dirResult.routes[i].legs,graphique,results, depart, arrivee,idPoly);
    }
}

/*
     *
     * Fonction de conversion du vecteur route obtenu par l'api google map
     */
function parseRoute(route,graphique,results, depart, arrivee,idPoly){
   
    for(var i = 0 ; i < route.length ; i++){
        dirOptions[indice].routes[i] = new Object();
        dirOptions[indice].routes[i].duration = route[i].duration.value;
        dirOptions[indice].routes[i].distance = route[i].distance.value;
        dirOptions[indice].routes[i].start = route[i].start_address;
        dirOptions[indice].routes[i].end = route[i].end_address;
        dirOptions[indice].routes[i].startCoord = route[i].start_location;
        dirOptions[indice].routes[i].endCoord = route[i].end_location;
               
        parseStep(route[i].steps,i);
    }

    traceAutoDirection(dirOptions[indice].routes,graphique,results, depart, arrivee,idPoly);
   
}

/*
     *
     * Fonction de conversion du vecteur step obtenu par l'api google map
     */
function parseStep(steps,indiceRoute){
       
    this.dirOptions[indice].routes[indiceRoute].steps = [];
    for(var i = 0 ; i < steps.length ; i++){
        dirOptions[indice].routes[indiceRoute].steps[i] = new Object();
        dirOptions[indice].routes[indiceRoute].steps[i].text = steps[i].instructions;
        dirOptions[indice].routes[indiceRoute].steps[i].distance = steps[i].distance.value;
        dirOptions[indice].routes[indiceRoute].steps[i].duration = steps[i].duration.value;
        dirOptions[indice].routes[indiceRoute].steps[i].startCoord = steps[i].start_location;
        dirOptions[indice].routes[indiceRoute].steps[i].endCoord = steps[i].end_location;
        dirOptions[indice].routes[indiceRoute].steps[i].path = steps[i].path;       
    }
}

/*
     *
     * Fonction de tracer d'un polyline sur la carte
     */
function addPolyline(t_latLng,results, depart, arrivee,idPoly){
     
    if(t_latLng.length > 0){
       
        $('#map_canvas').gmap3({
            action: 'addPolyline',
            options:{
                strokeColor: "#FF0000",
                strokeOpacity: 1.0,
                strokeWeight: 3
            },
            path:t_latLng,            
            callback:function (polyline){
                             
                if(depart && arrivee){
                    
                    //Ajout d'une ligne au tableau des arcs'
                    $('#table_Arc').append("<tr class='infoArc' id='poly"+idPoly+"'><td><a href='#' id='lienPoly"+idPoly+"'>"+depart+"-"+arrivee+"</a></td><td><a href='#'><img src='images/icn_edit.png' alt='modifier'/></a><a href='#'><img src='images/icn_trash.png' alt='supprimer' id='supprPoly"+idPoly+"'/></a></td></tr>");
                    
                    //Clic sur un lien dans le tableau
                    $("#lienPoly"+idPoly).live('click',function(){

                        //Recupération des polylines
                        polylines = $('#map_canvas').gmap3({
                            action:'get',
                            name:'polyline',
                            all:true
                        });
                        
                        //Couleur rouge
                        $.each(polylines,function(){
                            this.setOptions({
                                strokeColor: "#FF0000"
                            });
                        })
                        
                        //Coloration en bleu de la polyline crée
                        polyline.setOptions({
                            strokeColor: '#00008B'
                        });
                    });
                    
                    //Suppression de l'arc'
                    $('#supprPoly'+idPoly).live('click',function(){
                        if(!confirm('Etes-vous sur de vouler supprimer cet arc?')){
                         
                        }else{
                            polyline.setMap(null);
                            $("#poly"+idPoly).remove();
                        }
                    });             
                
                
                    //Coloration en rouge de la polyline lors du clic 
                    google.maps.event.addListener(map, "click", function() {
                        polyline.setOptions({
                            strokeColor: "#FF0000"
                        });
                    });
                                            
                    var latDepart=Math.floor(t_latLng[0].lat()*10000)/10000;
                    var longDep=Math.floor(t_latLng[0].lng()*10000)/10000;
                    var latArrivee=Math.floor(t_latLng[t_latLng.length-1].lat()*10000)/10000;
                    var longArrivee=Math.floor(t_latLng[t_latLng.length-1].lng()*10000)/10000;
               
                    //Pour chaque point
                    $('.infoPoint').each(function(){
                           
                        var lat=Math.floor((tabpoint[$(this).attr("id")]["latitude"])*10000)/10000;
                        var lon=Math.floor((tabpoint[$(this).attr("id")]["longitude"])*10000)/10000;
                        var point=new google.maps.LatLng(lat,lon);
                   
                        //On verifie que l'itineraire ne passe pas par un autre point du parcours'
                        if(google.maps.geometry.poly.isLocationOnEdge(point, polyline, 0.0006) &&
                            //Vérification que le point ne soit pas le point de depart ou d'arrive du parcours'
                            (lat!=latDepart) && (lon!=longDep) && (lat!=latArrivee) && (lon!=longArrivee)){
                        
                            //Suppression du polyline s'il passe par un point du parcours'
                            polyline.setMap(null);
                            $("#"+depart+"-"+arrivee).remove();
                        //alert("Depart: (" + latDepart + "," + longDep+") Arrivee: (" + latArrivee + "," + longArrivee+")" + " Point: (" + lat + "," + lon+")")
 
                        }
                    });
                }
            },
            
            events:{
                
                //Possibilité de supprimer la polyline ou d'ajouter une activité'
                rightclick: function(polyline,event){
                   
                    var content='<div id="menuGmap"><div class="item itemAjout">Ajouter activité</div><div id="supprPoly" class="item itemSuppr">Supprimer arc</div></div>';
                    
                    $('.item').live('hover',
                        function(){
                            $('.item').removeClass('hover');
                            $(this).addClass('hover');
                        }
                        );
                             
                    $("#map_canvas").gmap3({
                        action:'addOverlay',
                        latLng: event.latLng,
                        content: content
                    });
                   
                    polyline.setOptions({
                        strokeColor: '#00008B'
                    });
                    
                    $('#supprPoly').click(
                        function(){
                            if(!confirm('Etes-vous sur de vouler supprimer cet arc?')){
                         
                            }else{
                                polyline.setMap(null);
                                $("#poly"+idPoly).remove();
                            }
                        });
                            
                    map.setCenter(event.latLng)
                },
               
                //Modification de la polyline
                click: function(polyline,event){
                                        
                    polyline.setMap(null);
                    addDirectionDrag(results,idPoly,depart, arrivee);
                }
            }
        });
    }
    return false;
}

/*
     *
     * Fonction de tracer d'un itinéraire draggable
     */
function addDirectionDrag(results,idPoly, depart, arrivee){
    
    $('#map_canvas').gmap3({
        action:'addDirectionsRenderer',
        options:{
            preserveViewport: true,
            draggable: true,
            suppressMarkers : true,
            directions: results
        },
        callback:function(){
            
            google.maps.event.addListener(map, "click", function() {
                
                $('#map_canvas').gmap3('get'),
                dir = $('#map_canvas').gmap3({
                    action:'get',
                    name:'directionRenderer'
                });
                               
                if(dir){
                
                    var data = {};
                    var w=[];
                    var rleg = dir.getDirections().routes[0].legs[0];
                    data.start = {
                        'lat': rleg.start_location.lat(), 
                        'lng':rleg.start_location.lng()
                    }
                    data.end = {
                        'lat': rleg.end_location.lat(), 
                        'lng':rleg.end_location.lng()
                    }
                
                    var wp = rleg.via_waypoints; 
                    for(var i=0;i<wp.length;i++)w[i] = [wp[i].lat(),wp[i].lng()] 
                    data.waypoints = w;
     
                    var str = JSON.stringify(data);

                    $.ajax({
                        type: 'POST',
                        url: 'gestionArc.php',
                        data: "action=modifierArc&idPoly="+idPoly+"&waypoints="+str,
                        success: function(data, textStatus, jqXHR) {
                        //alert("modification arc effectué")
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                        //alert(textStatus)
                        }
                    });  
                                          
                    showDirections(dir.getDirections(),null,false,dir.getDirections(),depart, arrivee,idPoly);
                
                    $('#map_canvas').gmap3({
                        action:'clear',
                        name:'directionRenderer'
                    });
                }
            });
        },
        events: {
            directions_changed: function(display, event){
                
                $('#map_canvas').gmap3('get'),
                dir = $('#map_canvas').gmap3({
                    action:'get',
                    name:'directionRenderer'
                });
                
                var data = {};
                var w=[];
                var rleg = dir.getDirections().routes[0].legs[0];
                data.start = {
                    'lat': rleg.start_location.lat(), 
                    'lng':rleg.start_location.lng()
                }
                data.end = {
                    'lat': rleg.end_location.lat(), 
                    'lng':rleg.end_location.lng()
                }
                
                var wp = rleg.via_waypoints; 
                for(var i=0;i<wp.length;i++)w[i] = [wp[i].lat(),wp[i].lng()] 
                data.waypoints = w;
     
                var str = JSON.stringify(data);

                $.ajax({
                    type: 'POST',
                    url: 'gestionArc.php',
                    data: "action=modifierArc&idPoly="+idPoly+"&waypoints="+str,
                    success: function(data, textStatus, jqXHR) {
                    //alert("modification arc effectué")
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                    //alert(textStatus)
                    }
                });  
                                          
                showDirections(dir.getDirections(),null,false,dir.getDirections(),depart, arrivee,idPoly);
                
                $('#map_canvas').gmap3({
                    action:'clear',
                    name:'directionRenderer'
                });
            }
        }
    });
}
  
/*
     *
     * Fonction de tracer d'un graphique du denivelé d'un parcours
     */
function drawPath(itineraire) {

    // Create a new chart in the elevation_chart DIV.
    chart = new google.visualization.ColumnChart(document.getElementById('elevationGraf'));

    // Ask for 256 samples along that path.
    var pathRequest = {
        'path': itineraire,
        'samples': 256
    }

    // Initiate the path request.
    elevator.getElevationAlongPath(pathRequest, plotElevation);
}

/*
     *
     * Fonction de tracer d'un graphique du denivelé d'un parcours
     */
function plotElevation(results, status) {
       
    if (status == google.maps.ElevationStatus.OK) {
       
        var elevations = results;
        var elevationPath = [];
        
        for (var i = 0; i < results.length; i++) {
            elevationPath.push(elevations[i].location);
        }
           
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Sample');
        data.addColumn('number', 'Elevation');
       
        for (var i = 0; i < results.length; i++) {
            data.addRow(['', elevations[i].elevation]);
        }

        // Draw the chart using the data within its DIV.
        document.getElementById('elevationGraf').style.display = 'block';
        chart.draw(data, {
            height: 200,
            legend: 'none',
            titleY: 'Elevation (m)'
        });
    }
}

/*
     *
     * Fonction de calcul de la distance total d'un parcours
     */
function computeTotalDistance(result) {
       
    var totaldistance = 0;
    var totaltemps = 0;
   
    var myroute = result.routes[0];
    for (var i = 0; i < myroute.legs.length; i++) {
        totaldistance += myroute.legs[i].distance.value;
        totaltemps += myroute.legs[i].duration.value;
    }
   
    totaldistance = totaldistance / 1000.
    totaltemps= Math.floor(totaltemps/3600) + " h " + Math.floor((totaltemps/60)-(Math.floor(totaltemps/3600)*60)) + " min "+ Math.floor(totaltemps%60)+ " sec ";
 
    document.getElementById("distancetotal").innerHTML ="La distance total du trajet est de "+ totaldistance + " km";
    document.getElementById("tempstotal").innerHTML ="La durée estimée du trajet est de "+ totaltemps ;
}

//suppression d'une activité
function supprimerActivite($idActivite){
    //on recuperer les activites du point clic
    $.ajax({
        type: 'POST',
        url: 'gestionActivite.php',
        data:"action=supprimerActivite&idActivite="+$idActivite,
        success: function(data, textStatus, jqXHR) {
            $("#"+$idActivite).remove();
        },
        error: function(jqXHR, textStatus, errorThrown) {
        }
    });
    return false;
}


//modification d'une activite
function modifierActivite($idActivite,$type){
    
    //alert($idActivite +"---"+ $type);
    
    if($type == "chaud_froid"){
        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set heigth and width to mask to fill up the whole screen
        $('#mask').css({
            'width':maskWidth,
            'height':maskHeight
        });

        //Effet de transition
        $('#mask').fadeIn(1000);
        $('#mask').fadeTo("slow",0.8);

        //Recuperation des dimensions de l'ecran'
        var winH = $(window).height();
        var winW = $(window).width();

        //Placement de la pop-up au centre
        $('#chaud_froid').css('top',  50);
        $('#chaud_froid').css('left', winW/2-$('#chaud_froid').width()/2);
        $('#chaud_froid').fadeIn(2000);

        $('body').css('z-index',-1);
        
        //Requete ajax permettant de recuperer les points de la base de données
        $.ajax({
            type: 'POST',
            url: 'gestionActivite.php',
            data:"action=recupCF&id="+$idActivite,
            dataType:'json',
            success: function(data, textStatus, jqXHR) {
                $.each(data, function(key, val) {

                    $("#precision").val(val.precis);
                //$('#choixArcCF').val(val.arc);
                });
            },
            error: function(jqXHR, textStatus, errorThrown) {
            }
        });
        
        $("#submitCF").click(function(){

            var precisionU = $("#precision").val();
            var arcU = $("#choixArc :selected").text();
           
            modifierCF($idActivite,precisionU,arcU);
            return false;

        });
        
    }else if ($type == "temps_limite"){
        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set heigth and width to mask to fill up the whole screen
        $('#mask').css({
            'width':maskWidth,
            'height':maskHeight
        });

        //Effet de transition
        $('#mask').fadeIn(1000);
        $('#mask').fadeTo("slow",0.8);

        //Recuperation des dimensions de l'ecran'
        var winH = $(window).height();
        var winW = $(window).width();

        //Placement de la pop-up au centre
        $('#temps_limite').css('top',  50);
        $('#temps_limite').css('left', winW/2-$('#temps_limite').width()/2);
        $('#temps_limite').fadeIn(2000);

        $('body').css('z-index',-1);
        
        
        //Requete ajax permettant de recuperer les points de la base de données
        $.ajax({
            type: 'POST',
            url: 'gestionActivite.php',
            data:"action=recupTL&id="+$idActivite,
            dataType:'json',
            success: function(data, textStatus, jqXHR) {
                $.each(data, function(key, val) {
                    $('#minute').val(val.duree);
                //$('#choixArc').val(val.arc);
                });
            },
            error: function(jqXHR, textStatus, errorThrown) {
            }
        });

        
        $("#submitTL").click(function(){
            
            var dureeU = $("#minute").val();
            var arcU = $("#choixArc :selected").text();
           
            modifierTL($idActivite,dureeU,arcU);
            return false;

        });



    }else if($type == "quizz"){
        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set heigth and width to mask to fill up the whole screen
        $('#mask').css({
            'width':maskWidth,
            'height':maskHeight
        });

        //Effet de transition
        $('#mask').fadeIn(1000);
        $('#mask').fadeTo("slow",0.8);

        //Recuperation des dimensions de l'ecran'
        var winH = $(window).height();
        var winW = $(window).width();

        //Placement de la pop-up au centre
        $('#gestionActivite').css('top',  50);
        $('#gestionActivite').css('left', winW/2-$('#gestionActivite').width()/2);
        $('#gestionActivite').fadeIn(2000);

        $('body').css('z-index',-1);

        $("#addQ").click(function(){
            nbQuestion +=1;
            nbReponse +=3;
            idQuestion +=1;

            idReponse1=idReponse1+3;
            idReponse2=idReponse2+3;
            idReponse3=idReponse3+3;

            //Ajouter un nouveau formulaire pour proposer une nouvelle question
            $("#contenu").append(
                "<br /><div class='div' id='div"+idQuestion+"'>"+
                "<div class='div'>"+
                " <label>Question</label>"+
                "<input type='file' name='imageQ"+idQuestion+"' id='imageQ"+idQuestion+"' value='' onChange='getLien();'/>"+
                "<img width='100px' height='100px' src='' id='imgQ"+idQuestion+"' alt=''/>"+
                "<input type='checkbox' id='checkQ"+idQuestion+"' name='"+idQuestion+"' value='' />"+
                "<input type='text' name='question' id='question"+idQuestion+"' value='' required='required'/><br />"+
                "<br />"+
                "</div>"+
                "<div class='div'>"+
                "<label>Propositions</label><br />"+
                "</div>"+
                "<div class='div'>"+
                "<label>1)</label>"+
                "<input type='file' id='imgR"+idReponse1+"' value='' onChange='getLien();'/>"+
                "<img width='100px' height='100px' src='' id='imageR"+idReponse1+"' alt=''/>"+
                "<input type='checkbox' id='checkR"+idReponse1+"' value='' />"+
                "<input type='text' name='reponse' id='reponse"+idReponse1+"' value='' required='required'/><br />"+
                "</div>"+
                "<div class='div'>"+
                " <label>2)</label>"+
                "<input type='file' id='imgR"+idReponse2+"' value='' onChange='getLien();'/>"+
                " <img width='100px' height='100px' src='' id='imageR"+idReponse2+"' alt=''/>"+
                " <input type='checkbox' id='checkR"+idReponse2+"' value='' />"+
                "<input type='text' name='reponse' id='reponse"+idReponse2+"' value='' required='required'/><br />"+
                "</div>"+
                "<div class='div'>"+
                "<label>3)</label>"+
                "<input type='file' id='imgR"+idReponse3+"' value='' onChange='getLien();'/>"+
                "<img width='100px' height='100px' src='' id='imageR"+idReponse3+"' alt=''/>"+
                "<input type='checkbox' id='checkR"+idReponse3+"' value='' />"+
                "<input type='text' name='reponse' id='reponse"+idReponse3+"' value='' required='required'/><br />"+
                "</div>"+
                "</div>");

        });

    
        $.ajax({
            type: 'POST',
            url: 'gestionActivite.php',
            data:"action=modifierActivite&idActivite="+$idActivite+"&type="+$type,
            success: function(data, textStatus, jqXHR) {
            },
            error: function(jqXHR, textStatus, errorThrown) {
            }
        });
        return false;
    }
}


//suppression d'une activité
function supprimerActivite($idActivite){
    //on recuperer les activites du point clic
    if(confirm('Etes vous sur de vouloir définitivement supprimer cette activité?')){
        $.ajax({
            type: 'POST',
            url: 'gestionActivite.php',
            data:"action=supprimerActivite&idActivite="+$idActivite,
            success: function(data, textStatus, jqXHR) {
                $("#"+$idActivite).remove();
            },
            error: function(jqXHR, textStatus, errorThrown) {
            }
        });
    }
    return false;
}


function modifierTL($idActivite, $duree, $arc){
    //Requete ajax permettant de recuperer les points de la base de données
    $.ajax({
        type: 'POST',
        url: 'gestionActivite.php',
        data:"action=modifierTL&id="+$idActivite+"&duree="+$duree+"&arc="+$arc,
        success: function(data, textStatus, jqXHR) {
            alert("Activité Temps Limité modifiée");
            $("#temps_limite").fadeOut();
            $("#mask").hide();
        },
        error: function(jqXHR, textStatus, errorThrown) {
        }

    });
    return false;
}

function modifierCF($idActivite, $precision, $arc){
    
    //Requete ajax permettant de recuperer les points de la base de données
    $.ajax({
        type: 'POST',
        url: 'gestionActivite.php',
        data:"action=modifierCF&id="+$idActivite+"&precision="+$precision+"&arc="+$arc,
        success: function(data, textStatus, jqXHR) {
            alert("Activité Chaud-Froid modifiée");
            $("#chaud_froid").fadeOut();
            $("#mask").hide();
        },
        error: function(jqXHR, textStatus, errorThrown) {
        }

    });
    return false;
}
